<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 18 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <!-- 标题 -->
    <a-form-item
      label="标题"
      name="name"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <!-- 网址默认 -->
    <a-form-item label="网址" name="url">
      <a-input v-model:value="formState.url">
        <template #addonBefore>
          <a-select v-model:value="protocol" style="width: 90px">
            <a-select-option value="http://">Http://</a-select-option>
            <a-select-option value="https://">Https://</a-select-option>
          </a-select>
        </template>
        <template #addonAfter>
          <a-select v-model:value="suffix" style="width: 80px">
            <a-select-option value=".com">.com</a-select-option>
            <a-select-option value=".jp">.jp</a-select-option>
            <a-select-option value=".cn">.cn</a-select-option>
            <a-select-option value=".org">.org</a-select-option>
          </a-select>
        </template>
      </a-input>
      <!-- ////// -->
    </a-form-item>
    <!-- 图片 -->
    <a-form-item label="图片" name="pic" :rules="[{ required: true }]">
      <UploadImg
        ref="uploadImgInstance"
        @changePic="changePic"
        :initPic="formState.pic"
      />
      <!-- v-if="formState.pic" -->
    </a-form-item>
    <!-- 简介 -->
    <a-form-item label="简介" name="intro">
      <a-textarea
        v-model:value="formState.intro"
        placeholder="请输入内容！"
        show-count
        :maxlength="100"
        allow-clear
      />
    </a-form-item>
    <!-- 状态 -->
    <a-form-item label="状态：" name="status">
      <a-switch v-model:checked="formState.status" />
    </a-form-item>
    <!-- 按钮 -->
    <a-form-item :wrapper-col="{ offset: 3, span: 18 }">
      <a-space>
        <a-button type="primary" html-type="submit">{{
          isEdit ? "更改" : "添加"
        }}</a-button>
        <a-button @click="reset" v-if="!isEdit">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
<script setup name="bannerForm">
import UploadImg from "@/components/uploadImg";
import { parseURL, getExtension } from "@/utils/tools";
import { addBannerApi, updateBannerApi } from "@/api/banner";
import { message } from "ant-design-vue";
const router = useRouter();
const uploadImgInstance = ref(null);

const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false,
  },
  initVal: Object,
});
// 网址默认
const protocol = ref("https://");
const suffix = ref(".com");
// 网址
const formState = reactive({
  name: "",
  url: "",
  intro: "",
  pic: "",
  status: true,
  // remember: true,
});
//分解网址
watch(
  () => formState.pic,
  (newV) => {
    uploadImgInstance.value.refresh(newV);
  }
);
watch(
  () => props.initVal,
  (newV) => {
    formState.name = newV.name;
    //网址:
    if (newV.url.startsWith("http://") || newV.url.startsWith("https://")) {
      const { hostname, protocol: pro } = parseURL(newV.url);
      const [url, ext] = getExtension(hostname);
      formState.url = url;
      protocol.value = pro + "//";
      suffix.value = ext;
    }
    // 介绍
    formState.intro = newV.intro;
    //图片
    formState.url = newV.url;
    formState.pic = newV.pic;
  }
);
const changePic = (path) => {
  formState.pic = path;
};
//重置
const reset = () => {
  formState.name = "";
  formState.url = "";
  formState.pic = "";
  formState.intro = "";
  formState.status = true;
};
//提交
const onFinish = async (values) => {
  //新增 ||修改
  //console.log("Success:", values);
  let { intro, name, pic, status, url } = values;
  //url不完整需要处理
  url = protocol.value + url + suffix.value;
  if (props.isEdit) {
    //编辑提交
    //获取id
    const { id } = props.initVal;
    const res = await updateBannerApi(id, {
      id,
      intro,
      name,
      pic,
      status,
      url,
    });
    if (res.affected === 1) {
      message.success("更新成功,即将返回！");
      setTimeout(() => {
        router.push({ name: "banner" });
      }, 1000);
    } else {
      message.error("更新失败!");
    }
  } else {
    //新增提交
    const res = await addBannerApi({
      intro,
      name,
      pic,
      status,
      url,
    });
    if (res) {
      message.success("添加成功,即将返回！");
      setTimeout(() => {
        router.push({ name: "banner" });
        reset();
      }, 1000);
    }
  }
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>
